import React from 'react'
import 'antd/dist/antd.css'
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router-dom'
import './header.css'

const SubMenu = Menu.SubMenu
const { Header } = Layout;


export default class Top extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            username : 'rookie'
        }
    } 


    render () {
        return (
            <Header style={{ background: '#fff', padding: 0 }}>
                <Icon
                className="trigger"
                type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.props.toggle}
                />

                <Menu mode="horizontal" className="logOut" onClick={this.clear}>
                    <SubMenu title={<span><Icon type="user" />{ this.state.username }</span>} >
                        <Menu.Item key="logOut"><Link to="/login" >退出</Link></Menu.Item>
                    </SubMenu>
                </Menu> 
            </Header>
        );
    }
}

